<template>
  <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="title" label="楼盘名称" />
      <el-table-column prop="type" label="房源类型" />
      <el-table-column prop="num" label="门牌号" />
      <el-table-column prop="hometype" label="房源户型" />
      <el-table-column prop="name" label="户主" />
      <el-table-column align="right" v-if="props.isType === 'show'">
          <template #header>
              <el-input v-model="search" size="small" placeholder="Type to search" />
          </template>
      </el-table-column>
      <el-table-column label="操作" v-if="props.isType != 'show'">
          <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
      </el-table-column>
  </el-table>
  <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <UpdateTable @get-list="getTableList"></UpdateTable>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, onMounted, nextTick, reactive } from "vue"
import { useStore } from "vuex";
import UpdateTable from '../../components/UpdateDialog.vue'
import link from '../../util/apis'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useStore()

interface User {
  id: number,
  title: string,
  type: string,
  num: string,
  hometype: string,
  name: string
}

//表格数据
const userList = ref([])


onMounted(() => {
  getTableList()
})

//获取住户信息
const getTableList = () => {
  link('/userlist').then((ok) => {
      console.log(ok);
      if (ok.data.length) {
          ElMessage({
              message: '信息获取成功！',
              type: 'success',
          })
          userList.value = ok.data
          // store.commit('addTableData', ok.data)
          // console.log(state.userList);

      } else {
          ElMessage({
              message: '信息获取失败！',
              type: 'error',
          })
      }
  })
}

//当前页数
const currentPage = ref(1)
//每页显示个数
const pageSize = ref(10)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)

//搜索输入框
const search = ref('')

//接收表格类型
const props = defineProps(['isType'])

//处理显示的数据
const filterTableData = computed(() => {
  return userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
})

//显示个数变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
}

//页码改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

//编辑信息
const handleEdit = (row: any) => {
  console.log(row)
  store.commit('changeDialog')
  store.commit('showEdit', row)
}

//删除信息
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
      '确认删除该信息吗?',
      'Warning',
      {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
      }
  )
      .then(() => {
          link(`/userlist/${row.id}`, 'delete').then(ok => {
              if (ok.status === 200) {
                  ElMessage({
                      type: 'success',
                      message: '删除成功！',
                  })
                  getTableList()
              } else {
                  ElMessage({
                      type: 'error',
                      message: '删除失败！',
                  })
              }
          })
      })
      .catch(() => {
          ElMessage({
              type: 'info',
              message: '已取消！',
          })
      })
}


</script>

<style lang="scss" scoped>

</style>